<template>
  <div>
    <el-main>
      <el-row>
        <el-col :span="2">
          <div v-if="is_admin_view == 0">
            <el-button type="primary" @click='dialogVisible = true'>添加证书</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <div>
        <el-table style="width:90%" :header-cell-style="{ background: '#F3F8FE' }" @row-click="rowClick" align="center"
          :data="ListArr" border class="tableHeight">
          <el-table-column align="center" prop="pime" label="证书编号">
          </el-table-column>
          <!-- <el-table-column
             align="center"
               prop="type"
               label="消息类型"
               >
             </el-table-column> -->
          <el-table-column align="center" prop="title" width="380" label="证书名称">
          </el-table-column>
          <el-table-column align="center" prop="names" label="证书类型">
          </el-table-column>
          <el-table-column align="center" prop="names" label="证书有效日期">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="see" @click="see(scope.row.id)" type="text">查看</el-button>
              <el-button class="see" @click="set(scope.row.id)" type="text">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination" style="width:90%">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="page.page" :page-size="page.page_size" layout="total, prev, pager, next, jumper"
            :total="page.count" align='left'></el-pagination>
        </div>
      </div>
    </el-main>
    <el-dialog :close-on-click-modal='false' title="添加证书" :visible.sync="dialogVisible" width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="add" label-width="120px">
        <el-form-item label="证书编号">
          <el-input v-model="add.num"></el-input>
        </el-form-item>
        <el-form-item label="证书名称">
          <el-input v-model="add.name"></el-input>
        </el-form-item>
        <el-form-item label="证书类型">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in add.type" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证书有效期">
          <el-input v-model="add.time"></el-input>
        </el-form-item>
        <el-form-item label="证书图片">
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="4"
            :on-exceed="handleExceed" :file-list="add.img">
            <el-button class="pubBtn" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="button" class="pubBtn2" @click="dialogVisible = false">取消添加</el-button>
          <el-button type="button" class="pubBtn" style="width:98px;" @click="addSave">确定添加</el-button>
        </el-form-item>
      </el-form>
      <!-- <p class="input_item">
        <el-input v-model="add.num" placeholder="请输入证书编号"></el-input>
      </p>
      <p class="input_item">
        <el-input maxlength="11" v-model="add.name" placeholder="请输入证书名称"></el-input>
      </p>
      <p class="input_item">
        <el-input v-model="add.type" placeholder="请输入证书类型"></el-input>
      </p>
      <p class="input_item">
        <el-input v-model="add.time" placeholder="请输入有效期"></el-input>
      </p> -->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="button" class="pubBtn2" @click="dialogVisible = false">取消添加</el-button>
        <el-button type="button" class="pubBtn" style="width:98px;" @click="addSave">确定添加</el-button>
      </span> -->
    </el-dialog>
    <Service />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { pushIndex, pushAdd, tuserList, pushDelete } from "@/api"
import Service from '@/components/Service'
export default {
  components: {
    Service
  },
  data() {
    return {
      add: {
        num: '',
        name: "",
        type: [{
          value: '选项1',
          label: '黄金糕'
        },],
        time: "",
        img: []
      },
      dialogVisible: false,
      ListArr: [],
      page: [],
      pushList: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'roles',
      'type',
      'is_admin_view'
    ]),
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 4 个文件，请删除后添加`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    async getList() {
      try {
        const res = await pushIndex();
        const List = await tuserList();
        this.ListArr = res.list;
        this.page = res.page;
        this.pushList = List.list;
      } catch (e) {
        this.$message.error(e.message);
      }

    },
    rowClick(row) {
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const res = await pushIndex({
          page: size
        });
        this.ListArr = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const res = await pushIndex({
          page: currentPage
        });
        this.ListArr = res.list;
        this.page = res.page;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    handleClose() {
      this.dialogVisible = false
    },
    async addSave() {
      this.dialogVisible = false

      // try {
      //   const {
      //     name,
      //     mobile,
      //     email,
      //     position,
      //   } = this.add;
      //   await pushAdd({
      //     name,
      //     mobile,
      //     email,
      //     position,
      //     type: 0
      //   })
      //   this.getList();
      //   this.dialogVisible = false
      //   this.$message.success("添加成功")
      // } catch (e) {
      //   this.$message.error(e.message)
      // }
    },
    async deleteUser(id) {
      try {
        await pushDelete({
          id: id
        })
        this.getList();
        this.$message.success("删除成功")
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    see(id) {
      // console.log('查看')
    },
    set(id) {
      // console.log('修改')
    }
  }
}
</script>

<style scoped lang="less">
.diff {
  color: #F05C6C;
}

.input_item {
  margin-bottom: 20px;
}

::v-deep .el-dialog {
  .el-dialog__header {
    text-align: center;
  }

  .el-dialog__body {
    .el-form {
      .el-form-item {
        .el-form-item__label {
          text-align: left;
        }
        .el-form-item__content {
          .el-select {
            width: 100%;
          }
        }
      }

      //最后一个el-form-item的样式
      .el-form-item:last-child {
        margin-bottom: 0;
      }

      //倒数第二个el-form-item的样式
      .el-form-item:nth-last-child(2) {
        margin-bottom: 60px;
      }
    }
  }
}
</style>
